Description

Relates to #14752

This PR creates a new field formatter (for multi-value boolean fields (checkboxes) that adds a 'select all' option. Created as a field widget to be usable across the system. This implementation detail was chosen in order to avoid bespoke code for a single use case.

Why not an existing Drupal module? See here.

The 'select all' formatter implements a 'checkbox mixed/tri-state' variant that includes checked, unchecked, and mixed states. The mixed state is represented visually and with ARIA attributes for accessibility.

The formatter allows for custom for 'select all' text such that each field can have a contextual value. (see screenshot below for VAMC System Banner Alert with Situation Updates).

The javascript for the formatter was modified from W3.org. License is GPL compatible so we are good to use and modify providing we include the license info, which was added to the new checkbox_mix library per Drupal standards.

Generated description

This pull request includes several changes to enhance the functionality and styling of checkboxes in the va_gov_backend module. The most significant changes involve adding a new "select mixed options" checkbox behavior, updating related JavaScript files, and modifying the backend to support these changes.

Enhancements to checkbox functionality:

• docroot/modules/custom/va_gov_backend/js/checkbox_mixed.es6.js: Added a new "select mixed options" checkbox behavior to work as Drupal behaviors. This includes event handlers and state management for mixed checkboxes.
• docroot/modules/custom/va_gov_backend/js/checkbox_mixed.js: Added a compiled version of the new "select mixed options" checkbox behavior for production use.

Backend support for new checkbox behavior:

• docroot/modules/custom/va_gov_backend/src/Plugin/Field/FieldWidget/CheckboxMixedWidget.php: Implemented a new field widget plugin for checkboxes with "select all" functionality, including default settings, settings form, and form element rendering.

Styling updates:

• docroot/themes/custom/vagovclaro/assets/scss/components/_checkbox_mixed.scss: Added styles for the new mixed checkbox state, including background color and SVG icon for the mixed state.
• docroot/themes/custom/vagovclaro/assets/scss/styles.scss: Imported the new checkbox mixed styles into the main styles file.

Configuration updates:

• config/sync/core.entity_form_display.node.full_width_banner_alert.default.yml: Updated dependencies and third-party settings to include the new checkbox behavior and related modules. [1] [2] [3]
• docroot/modules/custom/va_gov_backend/va_gov_backend.libraries.yml: Added the new checkbox_mixed library with its dependencies and license information.

Testing done

Tested in a VAMC System Banner Alert with Situation Updates content type manually using both mouse and keyboard functionality (for accessibility).
Verified the GraphQL query results in no structural changes or additional data. [proof tbd]

Screenshots

QA steps

As an admin...

• Visit the form display page for the VAMC System Banner with Situation Updates content type.
• Validate the 'Pages for the following VAMC systems' has the 'Checkbox/radio buttons with select all' field widget selected.
• Validate the summary text is: "Select all text: Select all VAMC systems"

Validate Existing VAMC Banner with Situation Updates Form:

• Edit this existing VAMC banner (from the issue description as a candidate example).
• Validate you see the 'Select all VAMC systems option'.
• Validate that not all the current VAMCs are selected.
• Validate that the 'Select all VAMC systems option' checkbox is in the "mixed" state (has an 'X' to identify not all options are selected, and that all options are not unselected...a mixed state.
• Click on the 'Select all VAMC systems option' checkbox.
• Validate that all options become selected.
• Validate that the 'Select all VAMC systems option' becomes selected (shows a checkmark)
• Click again on the 'Select all VAMC systems option' checkbox.
• Validate that all VAMC options are unselected.
• Validate that the 'Select all VAMC systems option' become unselected (shows an empty checkbox)
• Click a third time on the 'Select all VAMC systems option' checkbox
• Validate you return to the previous mixed state (checkbox states as originally found when loading the page)
• Validate that the 'Select all VAMC systems option' checkbox is in the "mixed" state (an X in the checkbox to distinguish mixed state)

Validate New VAMC Banner with Situation Updates Form:

• Visit the 'create new' VAMC Banner with Situation Updates node page
• Validate the 'Select all VAMC systems' exists and is in the deselected state.
• Select the 'Select all VAMC systems' option.
• Validate all VAMC system checkboxes get selected/checked.
• Fill out all required fields and save the node as not published.
• On the node view page
• Validate all 141 VAMCs are listed. To do so, open devtools, and run the following javascript in the 'console' document.querySelectorAll('.field--name-field-banner-alert-vamcs .field__item').length

Definition of Done

• Documentation has been updated, if applicable.
• Tests have been added if necessary.
• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.
• If there are field changes, front end output has been thoroughly checked.

Select Team for PR review

• CMS Team
• Public websites
• Facilities
• User support
• Accelerated Publishing